<template>
  <div class="page-search">
    <el-form class="searchForm">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <el-row type="flex">
            <el-col>
              <el-form-item>
                <span>{{ title }}</span>
                <el-input v-model="goodsParams.title" :placeholder="placeholder" @keyup.enter.native="$emit('search')" />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item v-if="selectShow">
                <!-- 展开内容 -->
                <slot />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" size="mini" @click="$emit('search')">搜索</el-button>
            <el-button size="mini" @click="$emit('useReset')">重置</el-button>
            <el-button size="mini" class="toggle" @click="$emit('update:selectShow', !selectShow)">{{ selectShow ? '收起' : '展开' }}<i
              :class="{ 'el-icon-arrow-down': !selectShow, 'el-icon-arrow-up': selectShow }"
            /></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'PageSearch',
  props: {
    title: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    // 动态绑定的 title 和 分类id
    goodsParams: {
      type: Object,
      default: () => {}
    },
    // 下拉菜单的option选项数据
    options: {
      type: Array,
      default: () => []
    },
    // 控制下拉菜单的显示隐藏
    selectShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="scss" scoped>
  .page-search {
    span {
      font-size: 14px;
      margin-right: 10px;
    }

    .el-input--medium {
      width: 300px;
      height: 30px;
    }

    .el-form-item {
      margin-left: 20px;
    }

    ::v-deep .el-input--medium .el-input__inner {
      width: 300px;
      height: 30px;
    }

    .el-col-24 {
      width: unset;
    }

    .toggle {
      border: none;
      background-color: unset;
    }
  }
</style>
